<template>
  <div class="portraitHead">
    <div class="portraitHead_Title">灾情画像</div>
  </div>
  <!-- 灾情指数分析 -->
  <div class="disaster">
    <div class="disaster_title">
      <div>
        <div class="titleFlag"></div>
        <span>灾情指数分析</span>
      </div>
      <span class="disasterIndex">0.7</span>
    </div>
    <div class="disaster_body">
      <div id="disasterEchart"></div>
      <div class="disasterOther">
        <div v-for="item in disasterList" :key="item.id" class="progressBox">
          <div class="flex justify-between">
            <span>{{ item.title }}</span>
          </div>
          <div class="flex justify-between">
            <span styel="color: rgba(255, 255, 255, 0.8) !important;">{{ item.leftName }}</span>
            <ProgressBar :value="item.value"></ProgressBar>
            <span style="color: rgba(255, 102, 102, 1)">{{ item.rightName }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 资源指数分析 -->
  <div class="resource">
    <div class="resource_title">
      <div class="flex h-[20px] leading-[20px]">
        <img src="@/assets/image/titleBg.png" />
        <h1 class="text-white text-[20px] font-bold ml-[10px]">资源指数分析</h1>
      </div>
      <span class="resourceIndex">9.6</span>
    </div>
    <div class="resource_body">
      <div v-for="item in resourceList" :key="item.id" class="progressBox">
        <div class="flex justify-between">
          <span>{{ item.title }}</span>
        </div>
        <div class="flex justify-between">
          <span>{{ item.leftName }}</span>
          <ProgressBar :value="item.value"></ProgressBar>
          <span style="color: rgba(255, 102, 102, 1)">{{ item.rightName }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import ProgressBar from '@/components/common/ProgressBar.vue'
const initEcharts = () => {
  const myChart = echarts.init(document.getElementById('disasterEchart'))
  const option = {
    color: ['rgba(0, 183, 241, 1)', ''],
    tooltip: {
      show: false, // 弹层数据去掉
    },
    radar: {
      center: ['50%', '50%'], // 外圆的位置
      name: {
        textStyle: {
          color: 'rgba(153, 153, 153, 1)',
          fontSize: 18,
          fontWeight: 400,
          fontFamily: 'PingFangSC-Regular,PingFang SC',
        },
      },
      // TODO:
      indicator: [
        {
          name: '火势',
          max: 100,
        },
        {
          name: '威化',
          max: 100,
        },
        {
          name: '等级',
          max: 100,
        },
        {
          name: '场所',
          max: 100,
        },
        {
          name: '被困',
          max: 100,
        },
      ],
      splitArea: {
        // 坐标轴在 grid 区域中的分隔区域，默认不显示。
        show: true,
        areaStyle: {
          // 分隔区域的样式设置。
          color: ['rgba(0, 255, 204, .4)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
        },
      },
      axisLine: {
        // 指向外圈文本的分隔线样式
        lineStyle: {
          color: 'rgba(255,255,255,0.2)',
        },
      },
      splitLine: {
        lineStyle: {
          type: 'solid',
          color: 'rgba(255,255,255,0.3)', // 分隔线颜色
          width: 1, // 分隔线线宽
        },
      },
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            // TODO:
            value: [90, 70, 70, 60, 80],
            name: '灾情指数分析',
            areaStyle: {
              normal: {
                color: 'rgba(55, 92, 228, 1)',
              },
            },
          },
        ],
      },
    ],
  }
  myChart.setOption(option)
}
const disasterList = reactive([
  {
    id: 0,
    title: '火势大小',
    value: 30,
    leftName: '小',
    rightName: '大',
    imgUrl: '',
  },
  {
    id: 1,
    title: '人员被困',
    value: 50,
    leftName: '无',
    rightName: '多',
    imgUrl: '',
  },
  {
    id: 2,
    title: '有无危化品',
    value: 70,
    leftName: '无',
    rightName: '多',
    imgUrl: '',
  },
  {
    id: 3,
    title: '对象风险',
    value: 60,
    leftName: '小',
    rightName: '大',
    imgUrl: '',
  },
  {
    id: 4,
    title: '场所分析',
    value: 20,
    leftName: '普',
    rightName: '危',
    imgUrl: '',
  },
])
const resourceList = reactive([
  {
    id: 0,
    title: '火势大小',
    value: 30,
    leftName: '快',
    rightName: '慢',
    imgUrl: '',
  },
  {
    id: 1,
    title: '人员被困',
    value: 50,
    leftName: '足',
    rightName: '缺',
    imgUrl: '',
  },
  {
    id: 2,
    title: '有无危化品',
    value: 70,
    leftName: '好',
    rightName: '无',
    imgUrl: '',
  },
  {
    id: 3,
    title: '对象风险',
    value: 60,
    leftName: '好',
    rightName: '坏',
    imgUrl: '',
  },
  {
    id: 4,
    title: '场所分析',
    value: 20,
    leftName: '好',
    rightName: '差',
    imgUrl: '',
  },
])
onMounted(() => {
  initEcharts()
})
</script>
<style lang="less" scoped>
.portraitHead {
  color: #fff;
  font-weight: bolder;
  width: 100%;
  height: 60px;
  padding-top: 10px;

  .portraitHead_Title {
    font-size: 28px;
  }
}

.disaster {
  height: 60%;
  background: rgba(1, 10, 15, 0.5);
  margin-bottom: 10px;
  padding: 10px;

  .disaster_title {
    color: #fff;
    font-size: 20px;
    font-weight: bolder;
    display: flex;
    justify-content: space-between;

    .titleFlag {
      width: 6px;
      height: 18px;
      display: inline-block;
      background: url(@/assets/image/titleFlag.png) no-repeat;
      margin-right: 10px;
    }

    .disasterIndex {
      font-size: 36px;
      color: orange;
    }
  }

  .disaster_body {
    height: 100%;

    #disasterEchart {
      height: 310px;
    }

    .disasterOther {
      height: 45%;
      padding: 0 30px;

      .progressBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;

        span {
          color: #fff;
          font-size: 20px;
        }

        img {
          width: 20px;
          height: 20px;
          margin-right: 20px;
        }
      }
    }
  }
}

.resource {
  height: 35%;
  background: rgba(1, 10, 15, 0.5);
  padding: 10px;

  .resource_title {
    color: #fff;
    font-size: 20px;
    font-weight: bolder;
    display: flex;
    justify-content: space-between;

    .resourceIndex {
      font-size: 36px;
      color: orange;
    }
  }

  .resource_body {
    height: 100%;
    padding: 0 30px;

    .progressBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;

      span {
        color: #fff;
        font-size: 20px;
      }

      img {
        width: 20px;
        height: 20px;
        margin-right: 20px;
      }
    }
  }
}
</style>
